<template>
    <div class="zctableHead">
        <va-radio v-model="elzz" dictKey="q"/>
        <va-select v-model="elzz" dictKey="q"/>
        <el-collapse accordion v-if="searchDataVa.length!=0" v-model="activeNames">
            <el-collapse-item name="advancedSearch">
                <template #title>

                    高级搜索（条件展示）<i class="el-icon-s-operation"></i>


                </template>

                <div style="overflow-y: auto;max-height: 75px;">
                    <el-descriptions  :column="4" class="margin-top" size="mini">
                        <template #extra>
                            <el-button style="position: absolute; right: 50px;"
                                       type="text"
                                       @click="resetSearchData">
                                重置条件
                            </el-button>
                        </template>
                        <div v-for="(item,i) in searchDataVa" :key="item">

                            <el-descriptions-item v-if="item.value" label-align="center" align="left">

                                <template #label>
                                    <el-tooltip content="条件(字段)" placement="top">
                                        <i class="el-icon-s-operation">
                                            {{item.label}}
                                        </i>
                                    </el-tooltip>
                                </template>
                                <va-popover class="value-item"
                                            v-model="item.condition"
                                            dictKey="condition"
                                            :action="action"
                                />

                                <el-tooltip content="条件(值)*[点击编辑]" placement="top">
                                    <el-button type="text" size="mini" @click="searchVisibleVaChange">
                                        <va-text class="value-item"
                                                 v-model="item.value"
                                                 dictKey="q"
                                        >
                                        </va-text>
                                    </el-button>
                                </el-tooltip>

                                <el-tooltip content="删除" placement="top">
                                    <va-button class="value-item"
                                               icon="el-icon-error"
                                               size="mini"
                                               @click="deleteSearchData(i),action(searchVal)"

                                    />
                                </el-tooltip>

                            </el-descriptions-item>


                        </div>
                    </el-descriptions>
                </div>
            </el-collapse-item>
        </el-collapse>
        <div class="zctableBox">

            <div class="title">
                <VaBtnGroup :btnGroup="btnGroup"/>
            </div>

            <div class="zctableMain" v-if="!noSeach">
                <div class="zxtablesel">
                    <el-date-picker
                            class="zxtableIpt"
                            v-model="searchVal"
                            type="date"
                            :placeholder="myPlaceholder"
                            value-format="yyyy-MM-dd"
                            clearable
                            v-if="elType == 'date'"
                    ></el-date-picker>
                    <el-input
                            class="zxtableIpt"
                            :name="inputName"
                            :style="{width:attribute.inputWidth + 'px'}"
                            v-model="searchVal"
                            :placeholder="myPlaceholder"
                            size="mini"
                            clearable
                            @keyup.enter="action(searchVal)"
                    ></el-input>
                    <el-button
                            icon="el-icon-search"
                            type="primary"
                            :size="attribute.btnSize"
                            @click="action(searchVal)"
                            @keyup.enter="action(searchVal)"
                    >搜索
                    </el-button>
                    <template v-if="!myOnlyBase">
                        <el-button
                                @click="searchVisibleVaChange"
                                icon="el-icon-s-operation"
                                :size="attribute.btnSize">
                            高级搜索
                        </el-button>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import VaBtnGroup from "@/components/VaBtnGroup";
    import {reactive, toRefs} from 'vue'

    export default {
        components: {VaBtnGroup},
        name: "VaTableHead",
        emits: ['searchVisibleChange'],
        props: {
            btnGroup: {
                type: Array,
                default: () => []
            },
            attribute: {
                type: Object,
                default: () => ({
                    btnSize: "medium", //按钮大小
                    inputWidth: 320 // 每页条数下拉选项
                })
            },
            noSeach: {
                type: Boolean,
                default: false
            },
            // 输入框类型
            elType: {
                type: String,
                default: "input"
            },
            title: {
                type: String,
                default: "信息列表"
            },
            inputName: {
                type: String,
                default: "ZcSearch"
            },
            placeholder: {
                type: String,
                default: "请输入关键字"
            },
            onlyBase: {
                type: Boolean,
                default: true
            },
            action: {
                type: Function
            },
            searchData: {
                type: Array,
                default: () => []
            },
        },
        computed: {
            myTitle() {
                return this.title;
            },
            myPlaceholder() {
                return this.placeholder;
            },
            myOnlyBase() {
                return this.onlyBase;
            }
        },
        data() {
            return {
                activeNames: "advancedSearch",
                searchVal: "",
                elzz:"01"
            };
        },
        setup(props, {emit}) {
            const {searchData} = toRefs(props)


            let searchDataVa = reactive(searchData)


            const deleteSearchData = (index) => {
                searchDataVa.value[index].value = null;
            }

            const resetSearchData = () => {
                for (let i in searchDataVa.value) {
                    searchDataVa.value[i].value = null
                }

            }
            const searchVisibleVaChange = () => {
                emit("searchVisibleChange")
            }

            return {
                searchDataVa,
                deleteSearchData,
                resetSearchData,
                searchVisibleVaChange
            }
        }
    };
</script>

<style lang="less" scoped>
    .zctableHead {
        height: 70px;
        background-color: white;
        position: relative;

        .title {
            min-width: 144px;
            height: 100%;
            font-size: 24px;
            font-weight: 500;
            text-align: left;
            color: #212121;
            line-height: 70px;
            float: left;
        }

        .zctableBox {
            height: 100%;
            float: left;
            width: 100%;
        }

        .zctableMain {
            margin-left: 144px;
            height: 100%;

            .zxtableIpt {
                width: 320px;
                margin-right: 16px;
            }
        }

        .zxtablesel {
            float: right;
            height: 36px;
            margin-top: 16px;

            .el-button--small,
            .el-button--small.is-round {
                padding: 8px 15px 7px 15px;
                // border-bottom: 1px solid #1e7ed4;
            }
        }
    }

    .value-item {
        margin-left: 10px;
    }

</style>